<template>
  <div>
    <button @click="add">添加</button>
    <Mytable :list="list">
      <template #look="{ row }">
        {{ row }}
        <button @click="lookHandel(row)">编辑</button>
        <button @click="del(row.id)">删除</button>
      </template>
    </Mytable>
    <Dialog :isShow="isShow">
      <form>
        姓名: <input type="text" v-model="formData.name" /> <br />
        年龄: <input type="text" v-model="formData.age" /> <br />
      </form>
      <div>
        <button @click="submit">确认</button>
        <button @click="close">关闭</button>
      </div>
    </Dialog>
  </div>
</template>
<script>
import Mytable from './Book/Mytable.vue';
import Dialog from './Book/Dialog.vue';
export default {
  name: 'app',
  components: {
    Mytable,
    Dialog
  },
  data () {
    return {
      formData: {
        name: '',
        age: '',
        id: ''
      },
      isShow: false,
      list: [
        { id: 1, name: '妮妮', age: 18 },
        { id: 2, name: '风间', age: 19 },
        { id: 3, name: '小新', age: 17 },
      ],

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    //编辑 打开 模态框
    lookHandel (row) {
      this.isShow = true
      const obj = this.list.find(item => item.id == row.id)
      console.log(obj)
      this.formData = JSON.parse(JSON.stringify(obj))

    },
    //关闭模态框
    close () {
      this.isShow = false
      this.formData = ''
    },
    //删除逻辑
    del (id) {
      this.list = this.list.filter(item => item.id != id)
    },
    submit () {
      if (this.formData.id) {
        const obj = this.list.find(item => item.id == this.formData.id)
        obj.id = this.formData.id
        obj.name = this.formData.name
        obj.age = this.formData.age
        this.formData = ''
      } else {
        this.list.push({
          id: this.list.length + 1,
          name: this.formData.name,
          age: this.formData.age
        })
      }
      this.isShow = false

    },
    add () {
      this.isShow = true
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
